<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2d转换</title>

    <style>
        #box1{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
        }

        /*移动效果 translate */
        #box1:hover{
            /*像右，像下 移动50像素*/
            /*transform: translateX(50px) translateY(50px);*/
            /*简写 translate(水平,垂直)*/
            /*transform: translate(50px,50px);*/

            /*一个参数，只代表水平方向移动*/
            transform: translate(50px);
        }


        #box2{
            width: 200px;
            height: 200px;
            border: 1px solid tomato;
        }


        /*缩放效果  scale*/
        #box2:hover{
            /*缩放x轴，缩放y轴*/
            /*transform: scaleX(0.5) scaleY(0.5);*/

            /*一个参数，同时代表水平 垂直*/
            /*transform: scale(0.5);*/

            /*简写 scale(水平,垂直) */
            transform: scale(0.5,1.5);

        }


        #box3{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
        }

        /*旋转效果 rotate*/
        #box3:hover{
            /*这里是旋转180度*/
            transform: rotate(180deg);
        }

        /*过度效果 transition*/
        #box3{
            transition: all 3s linear;
        }

        #box4{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        /*倾斜效果 skew*/
        #box4:hover{
            /*transform: skewX(30deg);*/
            /*transform: skewX(30deg) skewX(50deg);*/
            /*简写 skew (左右 上下)*/
            transform: skew(30deg,50deg);
        }

        /*添加过度效果 transition*/
        #box4{
            transition: all 3s linear;
        }





    </style>

</head>
<body>

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>


</body>
</html>